<div class="page" data-ng-controller="TreeDemoCtrl">

    <div class="row ui-section" ng-controller="ListCtrl" ng-cloak>
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Material List</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <md-list>
                                <md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
                                <md-list-item ng-repeat="topping in toppings">
                                    <p> {{ topping.name }} </p>
                                    <md-checkbox class="md-secondary" ng-model="topping.wanted"></md-checkbox>
                                </md-list-item>
                            </md-list>                           
                        </div>
                    </div> 
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <md-list class="ui-material-list">
                                <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
                                <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
                                    <md-icon class="{{setting.icon}}"></md-icon>
                                    <p> {{ setting.name }} </p>
                                    <md-switch class="md-secondary" ng-model="setting.enabled"></md-switch>
                                </md-list-item>
                                <md-list-item ng-click="navigateTo('data usage', $event)">
                                    <md-icon class="zmdi zmdi-refresh"></md-icon>
                                    <p>Data Usage</p>
                                </md-list-item>
                            </md-list>                           
                        </div>
                    </div> 
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <md-list class="ui-material-list">
                                <md-subheader class="md-no-sticky">Checkbox with Secondary Action</md-subheader>
                                <md-list-item ng-repeat="message in messages">
                                    <md-checkbox ng-model="message.selected"></md-checkbox>
                                    <p>{{message.title}}</p>
                                    <md-icon class="md-secondary zmdi zmdi-comment-text" ng-click="doSecondaryAction($event)" aria-label="Chat"></md-icon>
                                </md-list-item>
                            </md-list>
                        </div>
                    </div>                 
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <md-list>
                                <md-subheader class="md-no-sticky">Avatar with Secondary Action Icon</md-subheader>
                                <md-list-item ng-repeat="person in people" ng-click="goToPerson(person.name, $event)">
                                    <img alt="" src="images/g1.jpg" class="img-circle img40_40 md-avatar">
                                    <p>{{ person.name }}</p>
                                    <md-icon ng-click="doSecondaryAction($event)" aria-label="Open Chat" class="md-secondary zmdi zmdi-comment" ng-class="{'md-primary': person.newMessage}"></md-icon>
                                </md-list-item>
                            </md-list>                          
                        </div>
                    </div>                 
                </div>
            </div> 

        </div>
    </div>



    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">List Group</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <ul class="list-group no-margin">
                                <li class="list-group-item">Cras justo odio</li>
                                <li class="list-group-item">Dapibus ac facilisis in</li>
                                <li class="list-group-item">Morbi leo risus</li>
                                <li class="list-group-item">Porta ac consectetur ac</li>
                                <li class="list-group-item">Vestibulum at eros</li>
                            </ul>
                            <span class="panel-label">Normal</span>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="panel panel-default no-margin">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <span class="badge">14</span>
                                        Cras justo odio
                                    </li>
                                    <li class="list-group-item">
                                        <span class="badge badge-warning">2</span>
                                        Dapibus ac facilisis in
                                    </li>
                                    <li class="list-group-item">
                                        <span class="badge badge-info">1</span>
                                        Morbi leo risus
                                    </li>
                                    <li class="list-group-item">
                                        <span class="badge badge-success">3</span>
                                        Vestibulum at eros
                                    </li>
                                    <li class="list-group-item">
                                        <span class="badge badge-danger">5</span>
                                        Porta ac consectetur ac
                                    </li>
                                </ul>
                            </div>
                            <span class="panel-label">With Badges</span>
                        </div>
                    </div>                        
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="list-group no-margin">
                                <a href="javascript:;" class="list-group-item active"> Cras justo odio </a>
                                <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in</a>
                                <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
                                <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
                                <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
                            </div>
                            <span class="panel-label">Linked items</span>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="panel panel-default no-margin">
                                <div class="list-group">
                                    <a href="javascript:;" class="list-group-item disabled">
                                        Cras justo odio
                                    </a>
                                    <a href="javascript:;" class="list-group-item">Dapibus ac facilisis in</a>
                                    <a href="javascript:;" class="list-group-item">Morbi leo risus</a>
                                    <a href="javascript:;" class="list-group-item">Porta ac consectetur ac</a>
                                    <a href="javascript:;" class="list-group-item">Vestibulum at eros</a>
                                </div>
                            </div>
                            <span class="panel-label">Disabled items</span>
                        </div>
                    </div>                        
                </div>
            </div>


        </div>
    </div>



    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Divider</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="media-list media-divider-full">
                                <div class="media">
                                    <a class="media-left" href="javascript:;">
                                        <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce cfelis in faucibus.</p>
                                    </div>
                                </div>
                                <div class="media">
                                    <a class="media-left" href="javascript:;">
                                        <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at. Donec lacinia congue felis in faucibus.</p>
                                    </div>
                                </div>
                                <div class="media">
                                    <a class="media-left" href="javascript:;">
                                        <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus    Donec lacinia congue felis in faucibus.</p>
                                    </div>
                                </div>
                            </div>
                            <span class="panel-label">Full Bleed</span>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="media-list media-divider-inset">
                                <div class="media">
                                    <a class="media-left" href="javascript:;">
                                        <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce cfelis in faucibus.</p>
                                    </div>
                                </div>
                                <div class="media">
                                    <a class="media-left" href="javascript:;">
                                        <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                    </a>
                                    <div class="media-body">
                                        <h4 class="media-heading">Media heading</h4>
                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at. Donec lacinia congue felis in faucibus.</p>
                                    </div>
                                    <div class="media">
                                        <a class="media-left" href="javascript:;">
                                            <img alt="" src="images/g1.jpg" class="img-circle img64_64">
                                        </a>
                                        <div class="media-body">
                                            <h4 class="media-heading">Media heading</h4>
                                            <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus    Donec lacinia congue felis in faucibus.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="panel-label">Inset</span>
                        </div>
                    </div>                        
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Nested Lists</h2>
        </div>
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-6">

                    <section class="panel panel-default">
                        <div class="panel-body">
                            <div ui-tree="options">
                                <ol ui-tree-nodes ng-model="list" >
                                    <li ng-repeat="item in list" ui-tree-node ng-include="'items_renderer.html'"></li>
                                </ol>
                            </div>
                        </div>
                    </section> 

                </div>
                <div class="col-md-6">

                    <section class="panel panel-default panel-minimal">
                        <div class="panel-heading">Serialised Output</div>
                        <div class="panel-body">
                            <pre class="text-muted">{{list}}</pre>
                        </div>
                    </section> 

                </div>
            </div>

        </div>
    </div>

    <script type="text/ng-template" id="items_renderer.html">
        <div class="angular-ui-tree-handle">
            <span>{{item.items}}</span>
        </div>
    </script>
    <script type="text/ng-template" id="items_renderer.html">
        <div class="angular-ui-tree-handle">
            <span data-ng-show="item.items.length > 0"><a class="angular-ui-tree-icon" data-nodrag ng-click="toggle(this)">
                <span class="angular-ui-tree-icon-collapse" ng-class="{'collapsed': collapsed, 'uncollapsed': !collapsed}"></span>
            </a></span>
            {{item.title}}
            <a class="pull-right angular-ui-tree-icon angular-ui-tree-icon-action" data-nodrag ng-click="remove(this)"><span class="fa fa-times"></span></a>
            <a class="pull-right angular-ui-tree-icon angular-ui-tree-icon-action" data-nodrag ng-click="newSubItem(this)"><span class="fa fa-plus"></span></a>
        </div>
        <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
            <li ng-repeat="item in item.items" ui-tree-node ng-include="'items_renderer.html'">
            </li>
        </ol>
    </script>

</div>